<script lang="ts" setup>
  import { api as viewerApi } from 'v-viewer';

  const props = defineProps<{
    pics?: string[];
  }>();

  const beginViewPics = () => {
    if (props.pics && props.pics.length > 0) {
      viewerApi({
        images: props.pics,
        options: {
          navbar: false,
        },
      });
    }
  };
</script>

<template>
  <div class="pic-album" @click="beginViewPics">
    <div v-if="!pics || pics.length === 0" class="pic-album-empty">
      暂无图片
    </div>
    <div v-else class="pic-album-cover">
      <img :src="pics[0]" alt="pic" />
    </div>

    <div class="pic-album-count">共{{ (pics || []).length }}张图片</div>
  </div>
</template>

<style lang="less" scoped>
  .pic-album {
    cursor: pointer;

    &-empty {
      aspect-ratio: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgb(var(--gray-3));
      border-radius: 4px 4px 0 0;
      color: var(--color-text-4);
    }

    &-cover {
      aspect-ratio: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgb(var(--gray-3));
      border-radius: 4px 4px 0 0;
      overflow: hidden;
      img {
        max-width: 100%;
        max-height: 100%;
      }
    }
    &-count {
      line-height: 32px;
      border: 1px solid rgb(var(--gray-3));
      border-top: none;
      border-radius: 0 0 4px 4px;
      text-align: center;
      color: var(--color-text-3);
    }

    &:hover {
      .pic-album-count {
        color: rgb(var(--primary-6));
      }
    }
  }
</style>
